import { BarTask } from "../../../types/barTask";

import { PropType } from "vue";

<!--
 * @Author: liaoyu1992 1519778181@qq.com
 * @Date: 2022-11-04 19:46:40
 * @LastEditors: liaoyu1992 1519778181@qq.com
 * @LastEditTime: 2022-11-11 22:03:47
 * @FilePath: \kgantt\core\components\taskitem\bar\BarDisplay.vue
 * @Description: 
-->
<template>
  <g @mousedown="onMouseDown">
    <rect
      :x="x"
      :y="y"
      :width="width"
      :height="height"
      :ry="barCornerRadius"
      :rx="barCornerRadius"
      :fill="getBarColor()"
      class="kgantt-barBackground"
    ></rect>
    <rect
      :x="progressX"
      :y="y"
      :width="progressWidth || 0"
      :height="height"
      :ry="barCornerRadius"
      :rx="barCornerRadius"
      :fill="getProcessColor()"
    ></rect>
  </g>
</template>
<script lang="ts" setup>
const props = defineProps({
  x: {
    type: Number,
    default: 0,
  },
  y: {
    type: Number,
    default: 0,
  },
  width: {
    type: Number,
    default: 0,
  },
  height: {
    type: Number,
    default: 0,
  },
  progressX: {
    type: Number,
    default: 0,
  },
  progressWidth: {
    type: Number,
    default: 0,
  },
  barCornerRadius: {
    type: Number,
    default: 0,
  },
  backgroundColor: {
    type: String,
    default: "",
  },
  backgroundSelectedColor: {
    type: String,
    default: "",
  },
  progressColor: {
    type: String,
    default: "",
  },
  progressSelectedColor: {
    type: String,
    default: "",
  },
  isSelected: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["onMouseDown"]);
const getProcessColor = () => {
  return props.isSelected
    ? props.progressSelectedColor
    : props.progressColor;
};

const getBarColor = () => {
  return props.isSelected
    ? props.backgroundSelectedColor
    : props.backgroundColor;
};
const onMouseDown = (event: MouseEvent) => {
  emits("onMouseDown", event);
};
</script>